<template>
  <yd-layout class="classification">
    <v-header title = "商品分类" fixed></v-header>
    <div class="con">
      <yd-scrolltab :callback = "callback">
        <yd-scrolltab-panel v-for = "(item, index) in tabLi" :key = "index" :label = "item.title" icon="demo-icons-category1">
          <div class = "class_con">
            <box bgImg = "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg" prop = "84:286"></box>
            <div class="card" v-for = '(item, index) in serviceLi' :key = "index">
              <h3 class="title">{{ item.title }}</h3>
              <yd-grids-group :rows="3">
                <yd-grids-item  v-for="(item, key) in item.children" :key="`${key}+ ${index}`">
                  <box slot="else" :bgImg = "item.imgSrc"></box>
                </yd-grids-item>
              </yd-grids-group>
            </div>
          </div>
        </yd-scrolltab-panel>
      </yd-scrolltab>
    </div>
  </yd-layout>
</template>
<script>
export default {
  name: 'classification',
  data () {
    return {
      tabLi: [],
      serviceLi: []
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.tabLi = [{
        title: '为您推荐'
      }, {
        title: '商家分类1'
      }, {
        title: '商家分类2'
      }, {
        title: '商家分类3'
      }, {
        title: '商家分类4'
      }]
      this.serviceLi = [{
        title: '热门服务类',
        children: [{
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }]
      }, {
        title: '为您推荐',
        children: [{
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }]
      }]
    },
    callback (val) {
      console.log(val)
      this.serviceLi = [{
        title: '热门服务类',
        children: [{
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }]
      }, {
        title: '为您推荐',
        children: [{
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }, {
          imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
        }]
      }]
    }
  }
}
</script>
<style lang="scss" scoped>
  .classification{
    padding-top: .64rem;
    box-sizing: border-box;
    .con{
      position: relative;
      height: 100%;
      /deep/ .yd-scrolltab-content-title{
        display: none;
      }
      .class_con{
        height: 100vh;
        padding: $padding;
        box-sizing: border-box;
        /deep/ .yd-grids-item{
          padding: .1rem;
          box-sizing: border-box;
        }
      }
    }
  }
</style>
